<template>
    <data-form ref="dataFormRef" :enums="enums" :model="form" width="35%" description="应用">
        <v-form-item v-model="form.id" prop="menuId"/>
        <v-form-item v-model="form.title" prop="title" label="应用名称" :disabled="running" required/>
        <v-form-item v-model="form.uri" prop="uri" label="访问地址" :disabled="running"
                     :attrs="{placeholder: '请输入访问地址,格式：http://IP地址:端口号/'}" required/>
        <v-form-item v-model="form.installPath" prop="installPath" label="安装目录" :disabled="running"
                     :attrs="{placeholder: '请输入程序安装目录(例如:/xxx/xx/xxx...)'}"/>
        <v-form-item prop="appName" label="Jar名称" el="override" required>
            <el-input v-model="form.appName" disabled>
                <template #append>
                    <el-upload :action="`${VITE_API_BASE_URL}/module/manifest`"
                               :headers="{'Authentication': token}"
                               :on-change="onChange"
                               :show-file-list="false"
                               accept=".jar">
                        <el-button :loading="uploading">选择程序Jar包</el-button>
                    </el-upload>
                </template>
            </el-input>
        </v-form-item>
        <el-row :gutter="10">
            <el-col :span="12">
                <v-form-item v-model="form.name" prop="name" label="英文名称" disabled/>
            </el-col>
            <el-col :span="12">
                <v-form-item v-model="form.version" prop="version" label="版本号" disabled/>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="12">
                <v-form-item v-model="form.produceTime" prop="produceTime" label="出厂日期" disabled/>
            </el-col>
            <el-col :span="12">
                <v-form-item v-model="form.deploymentMode" prop="deploymentMode" label="部署模式" el="select" disabled/>
            </el-col>
        </el-row>
        <v-form-item v-model="form.description" prop="description" label="描  述" :attrs="{type: 'textarea', autosize: { minRows: 3, maxRows: 6}}" disabled/>
    </data-form>
</template>

<script lang="ts" setup>
import {ref, nextTick} from "vue";
import { ElMessage } from 'element-plus'
import DataForm from '@/components/data-form/index.vue'
import VFormItem from "@/components/data-form/form-item.vue";
import store from "@/store";
import type { UploadProps } from 'element-plus'

const {token} = store.userStore;
const {VITE_API_BASE_URL} = import.meta.env

const dataFormRef = ref<InstanceType<typeof DataForm>>();
const form = ref({
    id: null,
    title: `${new Date().getTime()}应用`,
    uri: 'http://127.0.0.1:9529/',
    installPath: null,
    description: null,
    name: null,
    version: null,
    appName: null,
    produceTime: null,
    deploymentMode: 'Singleton',
})
const enums = ref<{ deploymentMode: string[] }>({
    deploymentMode: []
})
const running = ref(false)

const uploading = ref(false)
const onChange: UploadProps['onChange'] = (file) => {
    switch (file.status) {
        case 'success':
            let {code, message, data} = file.response as any;
            if (code === 200) {
                form.value.name = data.name
                form.value.version = data.version
                form.value.appName = data.appName
                form.value.produceTime = data.produceTime
                form.value.description = data.description
                form.value.deploymentMode = data.deploymentMode
            } else {
                ElMessage.error(message)
            }
            uploading.value = false;
            break;
        case 'fail':
            ElMessage.error("上传失败,请尝试刷新后再试")
            uploading.value = false;
            break
        case 'ready':
            uploading.value = true;
            break
    }
}

const open = (options: OpenFormConfig, enumsData: any) => {
    running.value = options.data? options.data.status === 2:false;
    enums.value = enumsData;
    dataFormRef.value.open(options)
    if (options.data) {
        nextTick(() => {
            Object.keys(form.value).forEach(key => form.value[key] = options.data[key])
        })
    }
};

defineExpose({open})
</script>

<style scoped>
.el-input-group__append button.el-button {
    color: var(--el-button-text-color) !important;
    border-color: var(--el-button-border-color) !important;
    background-color: var(--el-button-bg-color) !important;

}
</style>